<template>
    <c-dialog v-model:show="dialogFlag" v-if="dialogFlag" :title="title" @confirm="addUser" @close="close" :btnDisabled="onlyLook">
        <el-form ref="userForm" :model="formdata" label-width="100px">
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="formdata.roleName" show-word-limit maxlength="20" :disabled="onlyLook"/>
            </el-form-item>
        
            <el-form-item label="角色描述" prop="remark">
                <el-input type="textarea" v-model="formdata.remark" show-word-limit maxlength="50" :disabled="onlyLook"/>
            </el-form-item>
    
            <el-form-item label="角色权限" prop="" class="jsxz">
                <select-tree v-model="formdata.permissionIdList" :disabled="onlyLook"/>
            </el-form-item>
            <!-- {{ formdata.permissionIdList }} -->
        </el-form>
        
    </c-dialog>
</template>
<script setup>
import { ref,onMounted } from 'vue';
import cDialog from '@/components/custom/cDialog.vue'
import selectTree from './selectTree.vue';
import {message} from '@/utils/element.js'
import {addRole,getRoleDetail,editRole} from '@/api/user'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    title: String,
    editData: Object
})
const emit = defineEmits(['update:show','result'])

const formdata = ref({})
const userForm = ref(null)
const dialogFlag = ref(props.show)
const onlyLook = ref(false)

onMounted(async ()=>{
    if(props.editData.roleId){ // 编辑
        const res = await getRoleDetail(props.editData.roleId)
        if(res.code==200){
            formdata.value.roleName = res.data.roleName
            formdata.value.remark = res.data.remark
            formdata.value.roleId = res.data.roleId
            formdata.value.permissionIdList = res.data.permissionIdList
        }
        if(props.editData.islook){
            onlyLook.value = true
        }
    }
})



const addUser = async () => {
    if(!formdata.value.roleName){
        return message('请输入角色名称',4)
    }else if(!formdata.value.remark){
        return message('请输入角色描述',4)
    }else if(!formdata.value.permissionIdList || formdata.value.permissionIdList.length<1){
        return message('请输入角色描述',4)
    }
    let res = ''
    if(props.editData.roleId){ // 编辑
        res = await editRole(formdata.value)
    }else{ // 新增
        res = await addRole(formdata.value)
    }
   // const res = await addRole(formdata.value)
    if(res.code == 200){
        message('数据保存成功',2)
        close()
        emit('result',1) // 1表示成功
    }else{
        message('数据保存失败',4)
    }
}

const close = () => {
    emit('update:show', false)
}
</script>
<style lang="scss" scoped>
.mytips {
    font-size: 12px;
    color: #999;
}
</style>
<style lang="scss">
.jsxz {
    .el-form-item__content {
        display: block;
    }
}
</style>